<template>
  <button
    class="tech-btn hologram"
    :class="{ active: isActive }"
    @click="handleClick"
  >
    <slot>人员定位</slot>
    <span class="scanner"></span>
  </button>
</template>

<script setup lang="ts">
import { defineEmits } from 'vue'
import { ref } from 'vue'

// 向父组件暴露点击事件
const emit = defineEmits<{
  (e: 'scan'): void
}>()

// 控制激活状态
const isActive = ref(false)

function handleClick() {
  isActive.value = true
  emit('scan')

  // 一秒后恢复按钮状态
  setTimeout(() => {
    isActive.value = false
  }, 200)
}
</script>

<style scoped>
.tech-btn.hologram {
  background: rgba(0, 238, 255, 0.15);
  border: 1px solid rgba(0, 238, 255, 0.5);
  color: #fff;
  padding: 12px 35px;
  position: relative;
  overflow: hidden;
  border-radius: 6px;
  font-family: 'Orbitron', sans-serif;
  font-size: 16px;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.2s ease;
}

/* 点击后激活样式 */
.tech-btn.hologram.active {
  box-shadow: 0 0 15px rgba(0, 255, 255, 0.8), 0 0 30px rgba(0, 255, 255, 0.5);
  background: rgba(0, 255, 255, 0.25);
  transform: scale(1.05);
}

/* 扫描动画效果 */
.scanner {
  position: absolute;
  top: -100%;
  left: -100%;
  width: 300%;
  height: 300%;
  background: conic-gradient(
    from 0deg,
    transparent,
    rgba(0, 238, 255, 0.4),
    transparent 30%
  );
  animation: radarRotate 3s linear infinite;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}

@keyframes radarRotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
</style>
